Day30 JQuery 控制CSS

2021 iThome 鐵人賽

DAY 30

Modern Web

我的網頁前端小小小教室系列第 30 篇

13th鐵人賽

karta1366796

團隊imac_跳過這篇

2021-10-14 10:26:02

1646 瀏覽

分享至

這次要來介紹JQuery的第二種方式，透過控制CSS的狀態去做到網頁所需的效果，而在JQuery的網頁裡也有範本讓我們參考怎麼去實踐，接下來就讓我們看看能做到那些事情吧!

點到CSS的部分會有很多屬性讓你參考

讓我們看看昨天蓋板廣告的例子。
在還沒有關掉前，CSS的狀態就是display:flex。

而在他關掉後，變成了display:none。

這個例子讓我們知道其實這些動作，就是去控制CSS可以達成的。而我們今天就要用JQuery的方式去控制CSS。

1 .addClass()

我們要先添加當按鈕按下去時，CSS要改變成的樣子。

        .full-AD.close{
            display: none;
        }

接下來就是當full-AD被按下去時，添加所設定的.full-AD.close。

<script>
        $(document).ready(function(){
            // 做事的地方
            $('.btn-close').click(function(){
                $('.full-AD').addClass('close');
            })

        })
</script>

這樣子就完成了!

2 .removeClass()

我們要設定一個open的按鍵是可以讓蓋板廣告再回來的，那該怎麼做呢?
我們要先用html標籤建立出一個OPEN鍵。

<a href="" class="btn-open">OPEN</a>

當按下這個OPEN鍵的時候，我們要移除.colse這個CSS，就可以把蓋板廣告叫回來，

<script>
        $(document).ready(function(){
            // 做事的地方
            $('.btn-close').click(function(){
                $('.full-AD').addClass('close');
            })

             $('.btn-open').click(function(){
                $('.full-AD').remove('close');
            })

        })
</script>

所以我們將JQuery的部分改成這個樣子

3 .toggleClass()

如果我們今天要用同一個按鍵做開跟關呢?我們就要利用到.toggleClass()的方式!

我們先建立開關跟要顯示的段落，設定html跟css。

<style>
        .open-close{
            width: 300px;
            background-color: black;
            color: white;
            padding: 20px;
            text-decoration: none;
            display: block;
        }
        p{
            width: 300px;
            padding: 20px;
            background-color: violet;
            display: inline-block;
            font-size: 20px;
        }
</style>

<body>
        <a href="#" class="open-close">OPEN/COLSE</a>    
        <P>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore, quibusdam. Laboriosam dolorem cumque voluptatibus ipsa facere optio eius voluptate sed maiores, quos exercitationem, autem suscipit amet repellendus provident. Quasi optio ad consectetur architecto, sed quod nemo non harum maiores debitis nesciunt quibusdam fuga eos necessitatibus voluptate eum animi molestias ab.
        </P>
    
</body>

一開始就是靜態的網頁，按下去也不會有任何效果，接下來我們就要設定JQuery了!

<script>
        $(document).ready(function(){
            // 做事的地方
            $('.open-close').click(function(){
                $('.text').toggleClass('close');
            })


        })
</script>